<template> 
<div class="title">
    <el-icon size="30"><Management /></el-icon>
    <el-text size="large">细类管理</el-text>
</div>
<div class="functionBtn">
    <el-button icon="Back" @click="handleBack()">返回</el-button>
    <el-button icon="Plus" @click="handleAdd()">新增</el-button>
</div>
<hr style="background-color: #e8e8e8; height: 2px; border: none" />
<el-tabs type="border-card" @tab-click="handleTabClick">
    <el-tab-pane label="收入" name='0'>
        <el-table :data="revData" border show-summary style="width: 100%" table-layout="fixed" class="table">
            <el-table-column prop="category.categoryName" label="细类名称" />
            <el-table-column prop="count" label="记录条数" />
            <el-table-column fixed="right" label="操作">
                <template #default="scope">
                    <el-button link type="primary"  @click="handleEdit(scope.row.category.categoryId)">编辑</el-button>
                    <el-popconfirm title="确定删除？" @confirm="handleDel(scope.row.category.categoryId)">
                        <template #reference>
                            <el-button link type="primary">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </el-tab-pane>
    <el-tab-pane label="支出" name='1'>
        <el-table :data="expData" border show-summary style="width: 100%" table-layout="fixed" class="table">
            <el-table-column prop="category.categoryName" label="细类名称" />
            <el-table-column prop="count" label="记录条数" />
            <el-table-column fixed="right" label="操作">
                <template #default="scope">
                    <el-button link type="primary"  @click="handleEdit(scope.row.category.categoryId)">编辑</el-button>
                    <el-popconfirm title="确定删除？" @confirm="handleDel(scope.row.category.categoryId)">
                        <template #reference>
                            <el-button link type="primary">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </el-tab-pane>
</el-tabs>
<!-- 编辑框 -->
<el-dialog v-model="dialogVisible" 
    :title="dialogType == 0 ? '编辑细类名称' : '新增细类名称'" 
    destroy-on-close="true" 
    :before-close="newCategoryName=null" 
    width="35%" 
    align-center
>
    <el-form>
    <el-form-item label="细类名称" label-width="80px" style="margin: 18px 0 0 50px;">
        <el-input v-model="newCategoryName" placeholder="请填写细类名称" style="width: 260px" />
    </el-form-item>
    </el-form>
    <!-- 确认与取消 -->
    <template #footer>
    <span class="dialog-footer">
        <el-button @click="handleCancel()">取消</el-button>
        <el-button type="primary" @click="confirm()">确认</el-button>
    </span>
    </template>
</el-dialog>
</template>

<script setup>
import { getCategoryByType,editCategoryName,delCategory,addCategory } from '@/api/category';
import { onMounted, ref } from 'vue';
import router from '@/router';

const dialogVisible = ref(false);
const dialogType = ref(0);//0-编辑框，1-新增框
const newCategoryName = ref();
const currentCategoryId = ref(0);
const tabName = ref(0);//当前标签页name

const revData = ref([]);
const expData = ref([]);

const handleBack = () => {
    router.push('/category')
}

const handleAdd = () => {
    dialogType.value = 1;
    dialogVisible.value = true;
}

const handleTabClick = (targetName) => {
    tabName.value = targetName.props.name;
    getCategoryData(tabName.value)
}

const getCategoryData = (type) => {
    getCategoryByType(type).then((res) => {
        type == 0 ? (revData.value = res.data) : (expData.value = res.data);
    });
}

const handleEdit = (categoryId) => {
    dialogType.value = 0;
    dialogVisible.value = true;
    currentCategoryId.value = categoryId;
}

const confirm = () => {
    if(dialogType.value==0){
        editCategoryName(currentCategoryId.value,newCategoryName.value).then(() => {
            getCategoryData(tabName.value);
        })
    }else{
        let category = {
            categoryName: newCategoryName.value,
            parentId: tabName.value,
        }
        addCategory(category).then(() => {
            getCategoryData(tabName.value);
        })
    }
    dialogVisible.value = false;
    newCategoryName.value = null;
}

const handleCancel = () => {
    dialogVisible.value = false;
    newCategoryName.value = null;
}

const handleDel = (categoryId) => {
    delCategory(categoryId).then(() => {
        getCategoryData(tabName.value);
    })
}

onMounted(() => {
    getCategoryData(tabName.value);
})
</script>

<style scoped>
.title {
    display: inline-flex;
}
.title el-text {
    margin-left: 10px;
}
.functionBtn {
    float: right;
}
.table {
    height: 500px;
}
</style>